<template>
  <!--  #ifndef APP-NVUE  -->
  <view class="fixed-btn text-center flex-column flex-center" :style="{ bottom: bottom + 'px', right: right + 'px' }" @click="handleGoQuickAdd" @touchstart="start" @touchmove.stop.prevent="move" @touchend="end">
    <text class="tbb-tianjia1 flex-row flex-center add" />
    <text class="add text-22">新增</text>
  </view>
  <!--  #endif  -->
  <!--  #ifdef APP-NVUE  -->
  <view class="fixed-btn text-center flex-column flex-center" :style="{ bottom: bottom + 'px', right: right + 'px' }" prevent-move-event @click="handleGoQuickAdd" @panstart="start" @panmove="move" @panend="end">
    <text class="iconfont flex-row flex-center add">&#xe620;</text>
    <text class="add text-22">新增</text>
  </view>
  <!--  #endif  -->
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { sysInfo } from '@/common/util'

export default {
  name: 'AddButton',
  data() {
    const xy = this.addPosition
    let bottom = 100
    let right = 15
    if (xy) {
      bottom = xy.bottom
      right = xy.right
    }
    return {
      bottom,
      right,
      pageX: 0,
      pageY: 0,
      h: 0,
      w: 0
    }
  },
  computed: {
    ...mapGetters({
      addPosition: 'addPosition'
    })
  },
  mounted() {
    const system = sysInfo()
    this.h = system.windowHeight
    this.w = system.windowWidth
  },
  methods: {
    start(e) {
      const page = e.changedTouches[0]
      /* #ifdef APP-NVUE*/
      this.pageX = page.screenX
      this.pageY = page.screenY
      /* #endif*/
      /* #ifndef APP-NVUE*/
      this.pageX = page.pageX
      this.pageY = page.pageY
      /* #endif*/
    },
    move(e) {
      const page = e.changedTouches[0]
      let pageX, pageY
      /* #ifdef APP-NVUE*/
      pageX = page.screenX
      pageY = page.screenY
      /* #endif*/
      /* #ifndef APP-NVUE*/
      pageX = page.pageX
      pageY = page.pageY
      /* #endif*/
      const x = pageX - this.pageX
      const y = pageY - this.pageY
      this.pageX = pageX
      this.pageY = pageY
      if (this.right - x >= 0 && this.right - x <= this.w - 50) this.right -= x
      if (this.bottom - y >= 0 && this.bottom - y <= this.h - 50) this.bottom -= y
    },
    end() {
      this.setAddPosition({
        right: this.right,
        bottom: this.bottom
      })
    },
    handleGoQuickAdd() {
      this.$emit('click')
    },
    ...mapMutations({
      setAddPosition: 'order/setAddPosition'
    })
  }
}
</script>

<style scoped lang="scss">
.fixed-btn {
  @include position(fixed,$right: 40rpx, $bottom: 80rpx);
  width: 94rpx;
  height: 94rpx;
  border-radius: 50rpx;
  background-image: linear-gradient(to top, #DAA665, #F2C790);
  box-shadow: 0 8rpx 14rpx 1rpx rgba(138,76,0,0.2), inset 0 4rpx rpx 2rpx rgba(255,214,165,1);
}
.add{
  color:$font-color-button;
}
</style>
